<template>
  <div class="main-container container-fluid container-limited page-holder">
    <div class="page-title-holder">
      <h2 class="page-title">搜索</h2>
    </div>
    <div class="m-t-16 flex">
      <div class="flex-1">
        <label for="searchInput" class="search-label">请输入想要搜索的内容</label>
        <el-input
          id="searchInput"
          v-model="input"
          placeholder="可用空格分开多个关键字进行搜索"
          @keyup.enter.native="searchPreparation"
        />
      </div>
      <el-button
        type="primary"
        class="align-self-end m-l-10"
        @click="searchPreparation"
        :loading="loading"
      >搜索</el-button>
    </div>
    <el-menu
      mode="horizontal"
      class="issues deep-color"
      :default-active="searchParams.type"
      @select="typeSelect"
    >
      <el-menu-item index="spaces">空间</el-menu-item>
      <el-menu-item index="docs">资源</el-menu-item>
      <el-menu-item index="issues">问题</el-menu-item>
      <div class="controls-container" v-if="searchParams.type === 'spaces'">
        <SortSelect class="controls-child" :list-type="$C.sort.listType.spaces"/>
      </div>
    </el-menu>
    <spaces-list
      v-if="searchParams.type === 'spaces'"
      :spaces="results.spaces"
      :is-loading="loading"
    />
    <resources-list
      v-if="searchParams.type === 'docs'"
      :resources="results.docs"
      :loading="loading"
      belong
    />
    <issues-list
      v-if="searchParams.type === 'issues'"
      :issues="results.issues"
      :is-loading="loading"
      ownership-display
    />
    <pagination :current-page="pagination.current" :page-count="pagination.count" />
  </div>
</template>

<script>
import { formatSearchType, formatResults } from '@/views/search/format';
import SpacesList from '@/components/spaces/SpacesList';
import ResourcesList from '@/components/spaces/resources-v2/index/list';
import IssuesList from '@/components/spaces/issues/IssuesList';
import SortSelect from '@/components/shared/SortSelect';

export default {
  name: 'Search', // 搜索页面
  components: { SpacesList, ResourcesList, IssuesList, SortSelect },
  data() {
    return {
      input: this.$route.query.title,
      loading: false,
      results: {
        spaces: [],
        docs: [],
        issues: [],
      },
      pagination: { // 翻页组件
        current: null, // 当前页
        count: null, // 总页数
      },
    };
  },
  computed: {
    // 搜索所需参数
    searchParams() {
      const sort = this.$route.query.sort || ((this.$route.query.type || 'spaces') === 'spaces' ? this.$C.sort.spacesSort[0].value : '');
      return {
        title: this.$route.query.title,
        type: this.$route.query.type || 'spaces',
        page: this.$route.query.page || 1,
        sort: this.$C.sort.sortType[sort.split('_')[0]] || undefined,
        order: sort.split('_')[1] || undefined, // 排序方式（倒序、正序）
      };
    },
  },
  created() {
    if (this.searchParams.title) this.search();
  },
  methods: {
    // 进行搜索
    search() {
      this.loading = true;
      const params = Object.assign({}, this.searchParams, {
        type: formatSearchType(this.searchParams.type),
      });
      this.$api.search.fn(params)
        .then((res) => {
          Object.assign(this.results, {
            [this.searchParams.type]: formatResults(res.data, this.searchParams.type),
          });
          this.pagination.current = res.kaminari.current_page;
          this.pagination.count = res.kaminari.total_pages;
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 选择搜索类型
    typeSelect(type) {
      this.$root.$emit('addQuery', { type, page: undefined, sort: undefined });
    },
    // 搜索准备，把搜索的value放到url中
    searchPreparation() {
      this.$root.$emit('addQuery', { title: this.input.trim(), page: undefined, sort: undefined });
    },
    // 重置搜索结果
    resetResults() {
      this.results = { spaces: [], docs: [], issues: [] };
    },
  },
  watch: {
    searchParams(val) {
      if (val.title) this.search();
      else this.resetResults();
    },
  },
};
</script>

<style lang="scss">
.search-label {
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
}
</style>
